<template>
  <div class="box">
    <el-row :span="10" justify="space-between;" style="padding: 30px 0">
      <el-form ref="form" label-width="100px" class="flex">
        <el-col :span="3">
          <el-form-item label="">
            <div class="logoTitle">网络指标</div>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="统计日期">
            <datePick v-model="dateTime" label="统计日期" @dataTime="handleDataTime" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="数据范围">
            <networkSelect :value="'请选择所属网点'" @select="handleSelect" />
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item label="">
            <el-button @click="reast">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="borde-left">时效总览</div>
      </el-col>
    </el-row>
    <el-row v-if="!isObjectEmpty(dataObj)" :gutter="20">
      <el-col v-for="(item, index) in dataObj.objects" :key="index" :span="4">
        <div class="ech" :class="index == flag ? 'active' : ''" @click="selectActive(item, index)">
          <div class="ech-top">
            <span v-if="item.collectDate != null" style="font-size: 18px">汇总日期[{{ item.collectDate }}]</span>
            <span v-if="item.toTimelyRate != null" style="font-size: 18px; color: #999999">当天签收率:
              <span style="font-weight: bold; color: black">{{ Number(item.toTimelyRate) * 100 }}%</span></span>
            <span v-if="item.aimValues != null" style="font-size: 18px; color: #999999">目标值:
              <span style="font-weight: bold; color: black">{{ Number(item.aimValues) * 100 }}%</span>
            </span>
            <span v-if="item.plaimValues != null" style="font-size: 18px; color: #999999">一阶段目标值:<span style="font-weight: bold; color: black">{{
              item.plaimValues
            }}</span></span>
            <span v-if="item.p2aimValues != null" style="font-size: 18px; color: #999999">二阶段目标值:<span style="font-weight: bold; color: black">{{
              item.p2aimValues
            }}</span></span>

            <span v-if="item.needTime != null" style="font-size: 18px; color: #999999">揽收用时:<span style="font-weight: bold; color: black">{{ item.needTime }} h</span></span>
            <span v-if="item.preExamineAmount != null" style="font-size: 18px; color: #999999">预估考核款:<span style="font-weight: bold; color: black">{{
              item.preExamineAmount
            }}</span></span>
          </div>
          <div ref="mychart" class="echart" :style="{ float: 'left', width: '100%', height: '180px' }" />
        </div>
      </el-col>
    </el-row>
    <el-row v-if="isObjectEmpty(dataObj)" :gutter="20" justify="center">
      <div style="width: 100%; height: 320px" class="rowCenter">暂无数据</div>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="borde-left">数据报表</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-radio-group v-model="dataParams.collectType" @change="changeCollecType">
          <el-radio-button :label="1">网点</el-radio-button>
          <el-radio-button :label="2">承包区</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <elltable v-if="!isObjectEmpty(dataObj)" :loading="loading" :data="dataObj.sheets" :th="dataObj.fields" />
        <empty v-if="isObjectEmpty(dataObj)" />
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination :current-page="dataParams.pageDate.pageNum" :page-size="dataParams.pageDate.pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import datePick from '@/components/menuComponent/datePick.vue'
import networkSelect from '@/components/menuComponent/NetworkSelect.vue'
import timeExamine from '@/api/zhijian/time'
import Empty from '@/components/menuComponent/empty.vue'
export default {
  components: {
    datePick,
    networkSelect,
    Empty
  },
  data() {
    return {
      total: 0,
      dataObj: [],
      dataParams: {
        collectType: 1,
        endTime: '',
        networkNameId: 0,
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        type: ''
      },
      tableData: [],
      activeName: 'first',
      dateTime: '',
      currentPage: 1,
      flag: 0,
      loading: false
    }
  },
  mounted() { },
  created() { },
  methods: {
    isObjectEmpty(obj) {
      return Object.keys(obj).length === 0
    },
    initEcharts(dom, index) {
      console.log(this.dataObj.objects[index].seven)
      const collectDates = this.dataObj.objects[index].seven.map(
        (item) => item.collectDate
      )
      const pickupTimelyRates = this.dataObj.objects[index].seven.map(
        (item) => item.rate
      )
      const option = {
        xAxis: {
          show: false, // 设置 x 轴不显示
          type: 'category',
          data: collectDates
        },
        yAxis: {
          show: false, // 设置 y 轴不显示
          type: 'value'
        },
        tooltip: {
          trigger: 'axis', // 触发类型，坐标轴触发
          formatter: function (params) {
            return params[0].name + ': ' + Number(params[0].data) * 100 + '%'
          }
        },
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 9, // 折线的Y偏移
          shadowBlur: 8, // 折线模糊
          shadowColor: 'rgba(145, 132, 132, 1)' // 折线颜色
        },

        series: [
          {
            // this.dataList[index].seven
            data: pickupTimelyRates,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: 'blue'
            },
            symbol: 'none',
            areaStyle: {
              // 区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(32, 135, 208, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      const mychart = echarts.init(dom) // 图标初始化
      mychart.setOption(option) // 渲染页面

      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        mychart.resize()
      })
    },

    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleDataTime(val) {
      this.dataParams.startTime = val[0]
      this.dataParams.endTime = val[1]
      this.getTimeAll()
    },
    handleSelect(val) {
      this.dataParams.networkNameId = val
      console.log('select', val)
      this.getTimeAll()
    },
    reast() {
      this.dataParams = {
        collectType: 1,
        endTime: '',
        networkNameId: 0,
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        type: ''
      }
      this.dataObj = {}
    },
    handleSizeChange(val) {
      this.dataParams.pageDate.pageSize = val
      this.getTimeAll()
      console.log('改变size')
    },
    handleCurrentChange(val) {
      this.dataParams.pageDate.pageNum = val
      this.getTimeAll()
      console.log('改变页码')
    },
    selectActive(item, index) {
      this.flag = index
      this.dataParams.type = item.code
      console.log('切换', item.code)
      this.getTimeAll()
    },
    getTimeAll() {
      console.log('this.dataParams', this.dataParams)
      if (this.dataParams.startTime === '') {
        this.$message('请输入开始时间')
        return
      }
      if (this.dataParams.endTime === '') {
        this.$message('请输入结束时间')
        return
      }
      if (this.dataParams.networkNameId === 0) {
        this.$message('请输入所属网点')
        return
      }
      this.loading = true
      timeExamine.getCollectReceive(this.dataParams).then((res) => {
        if (res.code === 200) {
          this.loading = false
          this.dataObj = res.data
          this.$nextTick(() => {
            const domList = this.$refs.mychart
            domList.forEach((dom, index) => {
              console.log('this.$refs.e', dom)
              this.initEcharts(dom, index)
            })
          })
          console.log('输出res,', res.data)
          this.loading = false
        }
      })
    },
    changeCollecType(e) {
      console.log('改变：', e, this.dataParams)
      this.getTimeAll()
    }
  }
}
</script>
<style
  lang="scss"
  scoped
>
.active {
  animation: select 0.5s ease 0s 1 normal forwards;
}

@keyframes select {
  to {
    transform: scale(1.02);
    box-shadow: #99a9bf 2px 2px 5px 5px;
  }
}

.box {
  padding: 0px 20px;
}

.borde-left {
  border-left: 3px solid #2087d0;
  padding-left: 10px;
}

.rowCenter {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.left20 {
  margin-left: 20px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.ech {
  height: 320px;
  border: 1px solid #b4b4b4;
  display: flex;
  flex-flow: column;
}

.ech-top {
  height: 140px;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-left: 20px;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.logoTitle {
  width: 100%;
  height: 36px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #2087d0;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #2087d0;
}
</style>
